<template>
	<view class="index">
		<view style="height: 250rpx; background: #1365f9">
			<u-navbar bgColor="rgba(0,0,0,0)" :fixed="false">
				<view slot="left">
					<view style="font-weight: 600; font-size: 48rpx; color: #ffffff">项目</view>
				</view>
			</u-navbar>
		</view>
		<view class="flex-center1" style="position: relative; top: -60rpx">
			<view style="width: 686rpx; height: 116rpx; padding: 38rpx 44rpx; background: #ffffff; border-radius: 16rpx">
				<view class="align-center">
					<view class="flex-between1" style="flex: 1">
						<u-icon name="search" color="#666666" size="43"></u-icon>
						<input
							type="text"
							v-model="name"
							@confirm="
								list = [];
								getlist();
							"
							placeholder="搜索项目"
							style="font-weight: 400; font-size: 28rpx; color: #666666; flex: 1"
						/>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-between1" style="padding: 0 32rpx; margin-bottom: 30rpx">
			<view class="align-center">
				<view
					class="text1"
					:class="{ text2: type == 1 }"
					@click="
						type = 1;
						list = [];
						getlist();
					"
				>
					外部项目
				</view>
				<view
					class="text1"
					:class="{ text2: type == 2 }"
					@click="
						type = 2;
						list = [];
						getlist();
					"
				>
					公司项目
				</view>
				<view
					class="text1"
					:class="{ text2: type == 3 }"
					@click="
						type = 3;
						list = [];
						getlist();
					"
				>
					我的项目
				</view>
			</view>
			<view @click="show = true" style="padding: 8rpx 18rpx; background: #edf2f9; border-radius: 4rpx">
				<text v-if="status == 0">全部</text>
				<text v-if="status == 1">正在招</text>
				<text v-if="status == 2">已招满</text>
				<image src="@/static/index/bottom@2x.png" style="width: 22rpx; height: 14rpx; margin-left: 10rpx"></image>
				<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>
			</view>
		</view>
		<view style="padding: 0 32rpx 50rpx">
			<view v-for="(item, index) in list" :key="index" style="padding: 40rpx; background: #ffffff; margin-bottom: 20rpx">
				<view @click="$tools.navigite('./detail', item.id)" class="flex" style="margin-bottom: 25rpx">
					<view style="margin-right: 20rpx">
						<image :src="item.projectImg.split(',')[0]" style="width: 84rpx; height: 84rpx"></image>
					</view>
					<view class="flex-column flex-between">
						<view class="align-center">
							<view style="font-weight: 600; font-size: 28rpx; color: #333333; margin-right: 20rpx">{{ item.jobName }}</view>
							<view
								v-if="item.status == -1"
								class="flex-center1"
								style="width: 104rpx; height: 40rpx; background: #ffffff; border-radius: 8rpx; border: 1rpx solid #f9850b; font-size: 24rpx; color: #f9850b"
							>
								待审核
							</view>
							<view
								v-if="item.status == 0"
								class="flex-center1"
								style="width: 104rpx; height: 40rpx; background: #ffffff; border-radius: 8rpx; border: 1rpx solid #f9850b; font-size: 24rpx; color: #f9850b"
							>
								正在招
							</view>
							<view
								v-if="item.status == 1"
								class="flex-center1"
								style="font-size: 24rpx; color: #999999; width: 104rpx; height: 40rpx; background: #ffffff; border-radius: 8rpx; border: 1rpx solid #999999"
							>
								已招满
							</view>
							<view
								v-if="item.status == 2"
								class="flex-center1"
								style="font-size: 24rpx; color: #999999; width: 104rpx; height: 40rpx; background: #ffffff; border-radius: 8rpx; border: 1rpx solid #999999"
							>
								已下架
							</view>
						</view>
						<view style="font-weight: 300; font-size: 24rpx; color: #333333">
							<text>
								{{ item.companyName }} · 预招{{ item.total }}人 · {{ item.salaryStart }}-{{ item.salaryEnd }}
								<text v-if="item.salaryType == 1">元/小时</text>
								<text v-if="item.salaryType == 2">元/天</text>
								<text v-if="item.salaryType == 3">元/月</text>
							</text>
						</view>
					</view>
				</view>
				<!-- @click="$tools.navigite('./ldz')" -->
				<view class="flex-between1" style="margin-bottom: 25rpx">
					<view
						@click="$tools.navigite('./ldz', item.id, 1)"
						class="flex-column flex-center1"
						style="width: 132rpx; height: 96rpx; background: #f5f6fa; border-radius: 8rpx"
					>
						<view style="font-weight: 600; font-size: 32rpx; color: #666666">{{ item.count1 }}</view>
						<view style="font-weight: 400; font-size: 20rpx; color: #666666">查看</view>
					</view>
					<view
						@click="$tools.navigite('./ldz', item.id, 2)"
						class="flex-column flex-center1"
						style="width: 132rpx; height: 96rpx; background: #f5f6fa; border-radius: 8rpx"
					>
						<view style="font-weight: 600; font-size: 32rpx; color: #666666">{{ item.count2 }}</view>
						<view style="font-weight: 400; font-size: 20rpx; color: #666666">电话</view>
					</view>
					<view
						@click="$tools.navigite('./ldz', item.id, 3)"
						class="flex-column flex-center1"
						style="width: 132rpx; height: 96rpx; background: #f5f6fa; border-radius: 8rpx"
					>
						<view style="font-weight: 600; font-size: 32rpx; color: #666666">{{ item.count3 }}</view>
						<view style="font-weight: 400; font-size: 20rpx; color: #666666">已报名</view>
					</view>
					<view
						@click="$tools.navigite('./ldz', item.id, 4)"
						class="flex-column flex-center1"
						style="width: 132rpx; height: 96rpx; background: #f5f6fa; border-radius: 8rpx"
					>
						<view style="font-weight: 600; font-size: 32rpx; color: #666666">{{ item.count4 }}</view>
						<view style="font-weight: 400; font-size: 20rpx; color: #666666">合适</view>
					</view>
				</view>
				<!-- <view
					class="flex-center1"
					style="margin-bottom: 10rpx; font-weight: 400; font-size: 24rpx; color: #666666; width: 132rpx; height: 52rpx; background: #f8f8f8; border-radius: 8rpx"
				>
					添加简历
				</view> -->
				<view class="flex">
					<view
						v-if="item.status == 0 && type == 3"
						@click="closePost(item.id)"
						class="flex-center1"
						style="
							margin-right: 20rpx;
							font-size: 28rpx;
							color: #1365f9;
							width: 132rpx;
							height: 52rpx;
							background: #ffffff;
							border-radius: 4rpx;
							border: 1rpx solid #1365f9;
						"
					>
						下架
					</view>
					<view
						v-if="item.status == 2 && type == 3"
						@click="closePost(item.id)"
						class="flex-center1"
						style="
							margin-right: 20rpx;
							font-size: 28rpx;
							color: #1365f9;
							width: 132rpx;
							height: 52rpx;
							background: #ffffff;
							border-radius: 4rpx;
							border: 1rpx solid #1365f9;
						"
					>
						上架
					</view>
					<view
						v-if="type == 3"
						@click="copylist(item.id)"
						class="flex-center1"
						style="
							margin-right: 20rpx;
							font-size: 28rpx;
							color: #1365f9;
							width: 132rpx;
							height: 52rpx;
							background: #ffffff;
							border-radius: 4rpx;
							border: 1rpx solid #1365f9;
						"
					>
						复制
					</view>
					<view
						v-if="(item.status == 0 || item.status == 2) && type == 3"
						@click="$tools.navigite('./fbzw', item.id)"
						class="flex-center1"
						style="
							margin-right: 20rpx;
							font-size: 28rpx;
							color: #1365f9;
							width: 132rpx;
							height: 52rpx;
							background: #ffffff;
							border-radius: 4rpx;
							border: 1rpx solid #1365f9;
						"
					>
						修改
					</view>
					<view
						v-if="item.status == 0 && type != 2"
						@click="$tools.navigite('./tjjl', item.id)"
						class="flex-center1"
						style="font-size: 28rpx; color: #1365f9; width: 132rpx; height: 52rpx; background: #ffffff; border-radius: 4rpx; border: 1rpx solid #1365f9"
					>
						上人
					</view>
				</view>
			</view>
		</view>
		<movable-area class="movable-area">
			<!-- 				@touchend="onTouchend" -->
			<movable-view
				@click="$tools.navigite('./fbzw', -1)"
				class="movable-view flex-column flex-between1"
				:x="x"
				:y="y"
				:position="position"
				direction="all"
				@change="onChange"
			>
				<image src="@/static/mine/add.png" style="width: 148rpx; height: 148rpx"></image>
			</movable-view>
		</movable-area>
		<Tabbar1 :value="1" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			x: 375,
			y: 500,
			position: 4,
			x1: 0,
			x2: 0,
			y1: 0,
			y2: 0,
			move: {
				x: 0,
				y: 0
			},
			list: [],
			show: false,
			columns: [['全部', '正在招', '已招满', '已下架']],
			status: 0,
			pageNum: 1,
			pageSize: 20,
			isLastPage: false,
			name: '',
			type: 1
		};
	},
	onShow() {
		this.list = [];
		this.getlist();
		this.getWindowWidth();
	},
	onReachBottom() {
		if (this.isLastPage) return;
		this.pageNum++;
		this.getlist();
	},
	methods: {
		getlist() {
			const data = {
				name: this.name,
				type: this.type,
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				status: this.status - 1
			};
			this.$request('front/company/getProject', data).then((res) => {
				this.list = [...this.list, ...res.obj.list];
				console.log(res.obj.list, '列表');
				this.isLastPage = res.obj.isLastPage;
			});
		},
		confirm(e) {
			console.log(e, 'e');
			this.status = e.indexs[0];
			this.show = false;
			this.list = [];
			this.getlist();
		},
		closePost(id) {
			this.$request('front/company/closePost', { id }).then((res) => {
				this.$tools.toast('操作成功');
				setTimeout(() => {
					this.list = [];
					this.getlist();
				}, 1000);
			});
		},
		copylist(id) {
			this.$request('front/company/copyPost', { id }).then((res) => {
				this.$tools.toast('操作成功');
				setTimeout(() => {
					this.list = [];
					this.getlist();
				}, 1000);
			});
		},

		getWindowWidth() {
			let _this = this;
			uni.getSystemInfo({
				success: (res) => {
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - 50;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 20;
				}
			});
		},
		onChange(e) {
			this.move.x = e.detail.x;
			this.move.y = e.detail.y;
		},
		onTouchend() {
			this.x = this.move.x;
			this.y = this.move.y;
			setTimeout(() => {
				if (this.move.x < this.x2 / 2) this.x = this.x1;
				else this.x = this.x2;
			}, 100);
		}
	}
};
</script>

<style lang="less" scoped>
.movable-area {
	height: calc(100vh - var(--status-bar-height));
	width: 750rpx;
	position: fixed;
	top: var(--status-bar-height);
	left: 0;
	pointer-events: none;
	z-index: 100;
}
.movable-view {
	width: 148rpx;
	height: 148rpx;
	opacity: 1;
	position: relative;
	pointer-events: auto;
}
.index {
	min-height: 100vh;
	background: #f5f6fa;

	.text1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		margin-right: 50rpx;
	}
	.text2 {
		font-weight: 600;
		font-size: 36rpx;
		color: #333333;
	}
}
</style>
